<template>
	<view class="details">
		<!-- <SwiperCom :listImg="swiperList" /> -->
		<image :src="detailData.imgUrl" mode="aspectFit" style="width: 100%;"></image>
		<view class="pad-div">
			<view class="price">
				<view class="top">￥{{detailData.price}}</view>
				<view class="bottom">
					<text>价格</text>
					<text>￥{{detailData.price}}</text>
				</view>
			</view>
			<view class="title-other">
				<view class="out">
					<view class="title">
						{{detailData.name}}
					</view>
					<view class="other">
						注*退换货说明：1212212
					</view>
				</view>
				<button class="share" open-type="share" size="mini" plain='true'>
					分享
				</button>
				<!-- <text class="share iconfont icon-fenxiang" style="font-size: 26px;" @click="share"></text> -->
			</view>
		</view>
		<!-- 运费 -->
		<view class="card-out">
			<view class="freight-div">
				<view class="left">
					<text>运费</text>
					<text>免运费</text>
				</view>
				<view class="right">
					已售12
					<text>|</text>
					剩余1212
				</view>
			</view>
		</view>
		<view class="card-out">
			<view class="service-choose">
				<view class="service">
					<view class="service-left">
						<text>服务</text>
						<text>线下门店</text>
						<text>.</text>
						<text>快递发货</text>
						<text>.</text>
						<text>收货后结算</text>
					</view>
					<view class="iconfont icon-youjiantou" @click="toggle('bottom')"></view>
				</view>
				<view class="choose">
					<view class="choose-left">
						<text>
							选择
						</text>
						<text>
							颜色；
						</text>
						<text>
							尺码
						</text>
					</view>
					<view class="iconfont icon-youjiantou" @click="toggleChoose('bottom')"></view>
				</view>
			</view>
		</view>
		<view class="card-out">
			<view>
				商品评价
			</view>
			<view class="review">
				暂无评价
			</view>
		</view>
		<!-- 服务下拉框 -->
		<uni-popup ref="popup" background-color="#fff">
			<view class="service-popup">
				<view class="item">
					<view class="top">
						线下门店
					</view>
					<view class="bottom">
						该店铺拥有线下门店
					</view>
				</view>
				<view class="item">
					<view class="top">
						快递发货
					</view>
					<view class="bottom">
						可选择快递发货配送上门
					</view>
				</view>
				<view class="item">
					<view class="top">
						收货后结算
					</view>
					<view class="bottom">
						该店铺交易
					</view>
				</view>
				<button type='warn' @click="ok" class="btn">我知道了</button>
			</view>
		</uni-popup>
		<!-- 尺寸弹出框 -->
		<uni-popup ref="popupChoose" background-color="#fff">
			<view class="popupChoose">
				<view class="price red">
					￥100
				</view>
				<view class="inventory">
					剩余<text class="red">2</text>件
				</view>
				<view class="choose-size">
					请选择尺码
				</view>
				<LineBorder></LineBorder>
				<view class="color">
					颜色
				</view>
				<LineBorder></LineBorder>
				<view class="color">
					尺码
				</view>
				<ButtonCom :datas='btnList' @changeSize="changeSize"></ButtonCom>
				<LineBorder></LineBorder>
				<view class="toBuySize">
					<view class="color">
						购买数量
					</view>
					<uni-number-box @change="changeValue" :min="1" :value="num" />
				</view>
				<button @click="addCart" class="btn">加入购物车</button>
			</view>
		</uni-popup>
		<!-- 底部导航栏 -->
		<view class="goods-carts">
			<uni-goods-nav :fill="true" :options="options" :buttonGroup="buttonGroup" @click="onClick"
				@buttonClick="buttonClick" />
		</view>
	</view>
</template>

<script>
	import SwiperCom from "@/components/index/SwiperCom.vue";
	import http from "@/common/api/reqeust.js";
	import LineBorder from '@/components/common/LineBorder.vue';
	import ButtonCom from '@/components/details/ButtonCom.vue';
	import {
		mapMutations,
		mapState
	} from 'vuex';

	export default {
		data() {
			return {
				num: 1,
				color: '白色',
				swiperList: [],
				detailData: {},
				btnList: [],
				options: [{
					icon: 'headphones',
					text: '客服'
				}, {
					icon: 'shop',
					text: '店铺',
					infoBackgroundColor: '#007aff',
					infoColor: "red"
				}, {
					icon: 'cart',
					text: '购物车',
					info: 0,
				}],
				buttonGroup: [{
						text: '加入购物车',
						backgroundColor: '#ffa200',
						color: '#fff'
					},
					{
						text: '立即购买',
						backgroundColor: '#ff0000',
						color: '#fff'
					}
				]
			};
		},
		components: {
			SwiperCom,
			LineBorder,
			ButtonCom,
		},
		onLoad(e) {
			this.getDetailData(e.id)
		},
		// 点击标题栏分享
		onNavigationBarButtonTap(e) {
			if (e.type === 'share') {
				uni.share({
					provider: "weixin",
					type: 0,
					title: this.detailData.name,
					scene: "WXSceneSession",
					href: "http://192.168.0.177:3000/#/page/details/details?id=" + this.detailData.id,
					imageUrl: this.detailData.img,
					summary: "我正在使用HBuilderX开发uni-app！",
					success: function(res) {
						uni.showTabBar({
							title: '分享成功'
						})
					},
					fail: function(err) {
						console.log('err', JSON.stringify(err));
					}
				})
			}
		},
		methods: {
			...mapMutations(['addShopCart']),
			// 获取商品详情
			getDetailData(id) {
				http.request({
					url: "/api/goods/id",
					data: {
						id: id
					}
				}).then((res) => {
					this.detailData = res[0]
					// 尺码赋值
					this.btnList = res[0].size.split(',').map((i, index) => ({
						name: i,
						id: index
					}))
				}).catch((err) => {
					console.log(err);
					uni.showToast({
						title: '请求失败',
						icon: 'error'
					})
				})
			},
			share() {
				uni.share({
					provider: "weixin",
					scene: "WXSceneSession",
					type: 0,
					title: this.detailData.name,
					href: "http://192.168.0.177:3000/#/page/details/details?id=" + this.detailData.id,
					imageUrl: this.detailData.img,
					summary: "我正在使用HBuilderX开发uni-app，赶紧跟我一起来体验！",
					success: function(res) {
						uni.showTabBar({
							title: '分享成功'
						})
					},
					fail: function(err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
			},
			toggle(type) {
				this.$refs.popup.open(type)
			},
			toggleChoose(type) {
				this.$refs.popupChoose.open(type)
			},
			ok() {
				this.$refs.popup.close()
			},
			// 点击底部购物车/客服/店铺
			onClick(e) {
				const icon = e.content.icon
				if (icon === 'cart') {
					console.log(icon);
					uni.navigateTo({
						url: '/pages/cart/cart'
					})
				}
			},
			// 点击底部加入购物车/立即购买
			buttonClick(e) {
				let index = e.index
				// if (index === 0) {
				this.$refs.popupChoose.open('bottom')
				// }
			},
			// 商品数量
			changeValue(value) {
				this.num = value
			},
			// 点击加入购物车
			addCart() {
				let goods = this.detailData;
				let goods_id = goods.id; //商品id
				let num = this.num;
				// this.detailData['checked'] = false;
				// this.detailData['num'] = this.num;
				// this.detailData['size'] = this.size;
				// this.detailData['color'] = this.color;
				// this.addShopCart(goods)
				// this.$refs.popupChoose.close()
				// this.options[2].info += this.num

				http.request({
					url: '/api/addCart',
					method: 'post',
					data: {
						phone: this.userInfo.phone,
						goods_id,
						num
					}
				}).then(res => {
					if (res.success) {
						uni.showToast({
							title: res.msg
						})
						this.$refs.popupChoose.close()
					}
				}).catch(() => {
					uni.showToast({
						title: '请求失败',
						icon: 'error'
					})
				})
			},
			// 选择尺码
			changeSize(v) {
				this.size = v
				console.log(v);
			}
		},
		// onShareAppMessage 分享给朋友
		// onShareTimeline  分享到朋友圈
		onShareAppMessage: function(res) {
			if (res.from === 'button') {}
			return {
				title: this.detailData.name,
				imageUrl: this.detailData.img,
				path: "http://192.168.0.177:3000/#/page/details/details?id=" + this.detailData.id,
				summary: '1111'
			}
		},
		// 返回按钮关闭弹出框
		onBackPress() {
			this.$refs.popupChoose.close()
			this.$refs.popup.close()
		},
		computed: {
			...mapState({
				userInfo: state => state.user.userInfo
			}),
		}

	}
</script>

<style lang="scss" scoped>
	.details {
		background-color: #FAFAF9;

		.card-out {
			padding: $pd20 $pd30;
			background-color: #fff;
			margin: $pd20 0;
		}

		.review {
			color: $txt-color;
		}

		.btn {
			border-radius: $border-commom;
			margin: 20% 0 3% 0;
			background-color: #ffa200;
			color: #fff
		}

		.pad-div {
			padding: $pd20;
			background-color: #fff;
		}

		.goods-carts {
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			flex-direction: column;
			position: fixed;
			left: 0;
			right: 0;
			/* #ifdef H5 */
			left: var(--window-left);
			right: var(--window-right);
			/* #endif */
			bottom: 0;
		}

		.iconfont {
			color: $txt-color;
		}

		.price {
			.top {
				color: red;
				font-size: $uni-font-size-lg;
			}

			.bottom {
				color: $txt-color;
				font-size: $uni-font-size-sm;

				text:nth-child(2) {
					text-decoration: line-through;
					padding-left: 10rpx;
				}
			}
		}

		.title-other {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.out {
				.title {}

				.other {
					color: $txt-color;
					font-size: $uni-font-size-sm;
					padding: 10rpx 0;
				}
			}
		}

		.freight-div {
			display: flex;
			justify-content: space-between;

			.left {
				text:nth-child(1) {
					color: $txt-color;
				}

				text:nth-child(2) {
					padding-left: $pd20;
				}
			}

			.right {
				color: $txt-color;

				text {
					padding: 0 $pd20;
				}
			}
		}

		.service-choose {
			.service {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.service-left {
					:not(:nth-child(1)) {
						padding-left: $pd20;
					}
				}

				text:nth-child(1) {
					color: $txt-color;
				}
			}

			.choose {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-top: $pd20;

				.choose-left {
					text:nth-child(1) {
						color: $txt-color;
					}

					text:nth-child(2) {
						padding: $pd20;
					}
				}
			}
		}

		.service-popup {
			padding: 0 $pd30;

			.item {
				margin: 10% 0;

				.top {
					margin-bottom: $pd30;
				}

				.bottom {
					color: $txt-color;
				}
			}
		}

		.popupChoose {
			padding: $pd20;

			.price {
				font-weight: 900;
				font-size: $uni-font-size-lg;
			}

			.inventory {
				padding: $pd20 0;

				text {
					padding: 0 10rpx;
				}
			}

			.choose-size {
				padding-bottom: $pd20;
			}

			.color {
				padding: $pd20 0;
			}

			.toBuySize {
				display: flex;
			}

			.toBuySize {
				margin-top: $pd20;
				align-items: center;
				justify-content: space-between;
			}
		}
	}
</style>
